<template>
  <div class="natal-chart">
    <div class="natal-chart__body" ref="natalChartDom">
      <template v-for="palace in natalChart" :key="palace.code">
        <PalaceCell v-bind="palace" :currentCode="currentCode" @click="() => onClickPalaceCell(palace.index)"/>
        <CenterCell v-bind="person" v-if="palace.dizhiCode == 'chen'"/>
      </template>
      <div class="canvas-wapper" v-if="natalChartDom">
        <canvas id="sanfang" :width="natalChartDom?.clientWidth" :height="natalChartDom?.clientHeight"></canvas>
      </div>
    </div>
  </div>
</template>

<script setup>
import CenterCell from './CenterCell.vue';
import PalaceCell from './PalaceCell.vue';
import { reactive, ref, onMounted, provide, watch, nextTick } from 'vue';
import { useRoute } from 'vue-router';
import Person from './utils/Person';

const route = useRoute()
const person = new Person(route.query)

const { natalChart, natalChartMap } = person

const pRefs = reactive({})

const natalChartDom = ref(null)
const currentCode = ref([])

provide('prefs', {
  pRefs,
  addRef(dz, r){
    pRefs[dz] = r
  }
})

const onClickPalaceCell = (index) => {
  drawSanfangSizheng(index)
}

const drawSanfangSizheng = (palaceIndex)=>{
  // const { fatePalaceIndex } = person
  const startDz = person.getPalace(palaceIndex)?.dizhiCode
  const leftDz = person.getPalace(palaceIndex - 4)?.dizhiCode
  const rightDz = person.getPalace(palaceIndex + 4)?.dizhiCode
  const faceDz = person.getPalace(palaceIndex + 6)?.dizhiCode
  const startPoint = getPoint(startDz)
  const leftPoint = getPoint(leftDz)
  const rightPoint = getPoint(rightDz)
  const facePoint = getPoint(faceDz)
  currentCode.value = [startDz, leftDz, rightDz, faceDz]
  // console.log('6666666666666', startDz, leftDz, rightDz, faceDz)
  // console.log(pRefs);
  draw(startPoint, leftPoint, rightPoint, facePoint)
}

const getPoint = (dz) => {
  const { right, bottom, top, left, width, height } = pRefs[dz].getBoundingClientRect()
  // console.log(dz, right, bottom, top, left, width, height);
  const space = 20;

  const point = { x: 0, y: 0 }
  switch (dz) {
    case 'si':
      point.x = right - space
      point.y = bottom - space
      break;
    case 'wu':
      point.x = right - space - (width / 2)
      point.y = bottom - space
      break;
    case 'wei':
      point.x = right - space - (width / 2)
      point.y = bottom - space
      break;
    case 'shen':
      point.x = left - space
      point.y = bottom - space
      break;
    case 'chen':
      point.x = right - space
      point.y = bottom - space - (height / 2)
      break;
    case 'mao':
      point.x = right - space
      point.y = bottom - space - (height / 2)
      break;
    case 'you':
      point.x = left - space
      point.y = bottom - space - (height / 2)
      break;
    case 'xu':
      point.x = left - space
      point.y = bottom - space - (height / 2)
      break;
    case 'yin':
      point.x = right - space
      point.y = top - space
      break;
    case 'chou':
      point.x = right - space - (width / 2)
      point.y = top - space
      break;
    case 'zi':
      point.x = right - space - (width / 2)
      point.y = top - space
      break;
    case 'hai':
      point.x = left - space
      point.y = top - space
      break;

    default:
      break;
  }
  return point
}
const draw = (sp, lp, rp, fp) => {
  const canvas = document.getElementById('sanfang')
  // console.log('canvas-------------', canvas);
  if (!canvas.getContext) return;
  const ctx = canvas.getContext("2d");
  ctx.clearRect(0,0,canvas.clientWidth, canvas.clientHeight)
  ctx.strokeStyle = 'pink'
  ctx.setLineDash([5, 10]);  // [实线长度, 间隙长度]
  ctx.beginPath();
  ctx.moveTo(sp.x, sp.y);
  ctx.lineTo(lp.x, lp.y);
  ctx.lineTo(rp.x, rp.y);
  ctx.closePath();
  ctx.stroke()

  ctx.beginPath();
  ctx.moveTo(sp.x, sp.y)
  ctx.lineTo(fp.x, fp.y)
  ctx.closePath()
  ctx.stroke()
}
watch(natalChartDom, (newVal, oldValue)=>{
  nextTick(()=>{
    drawSanfangSizheng(person.fatePalaceIndex)
  })
})

</script>

<style>
.natal-chart {
  padding: 20px;
}
.canvas-wapper{
  z-index: 1;
  position: relative;
  position: absolute;
  width: 100%;
  height: 100%;
}

.natal-chart__body {
  position: relative;
  box-sizing: border-box;
  border-radius: 4px;
  width: calc(100vw - 40px);
  height: calc(100vh - 40px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 25%);
  gap: 0;
  grid-template-areas: 'si wu wei shen'
                       'chen center center you'
                       'mao center center xu'
                       'yin chou zi hai';
  overflow: hidden;
}
</style>

